<template>
	<view class="orderinfo">
		<view class="info_tit">
			{{$zhTran('共')+( pageobj.list.length || 0 )+$zhTran('笔订单')}}
		</view>

		<view class="datalist" v-if="pageobj.list.length">
			<view class="data_val order_item" v-for="(item, index) in pageobj.list">

				<view class="order_top FlexAlign">
					<view class="img_box">
						<image :src="item.user_avatar" mode="widthFix"></image>
					</view>
					<view class="uinfo">
						<view class="name">
							{{item.user_nickname || ''}}
						</view>
						<view class="orderNum">
							{{$zhTran('订单总额：')}}
							<text>{{item.order_amount || 0}}</text>
						</view>
					</view>

					<view class="state_area">
						<view class="state_box FlexRow ">
							{{item.status_desc || ''}}
						</view>
					</view>
				</view>
				<view class="order_bottom">
					<view class="binfoline">
						{{$zhTran('商品数量：')}}{{item.total_num || '-'}}
					</view>
					<view class="binfoline">
						{{$zhTran('下单时间：')}}{{item.create_time || '-'}}
					</view>
					<view class="binfoline">
						{{$zhTran('支付时间：')}}{{item.pay_time || '-'}}
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		apiorderLists,
	} from '@/api/rebate'

	export default {
		name: '',
		props: {
			rrl_id: {
				type: String | Number,
				default: '',
			}
		},
		components: {

		},
		watch: {
			rrl_id() {
				this.getDatasList()
			},
		},
		// 触底
		onReachBottom() {
			if (this.pageobj.page_size > 10) {
				this.pageobj.page_no = Math.ceil(this.pageobj.page_size / 10)
				this.pageobj.page_size = 10
			}
			if (this.pageobj.page_total > this.pageobj.page_no) {
				this.pageobj.page_no += 1
				this.getDatasList()
			} else {
				if (this.pageobj.list.length) {
					uni.showToast({
						title: this.$zhTran('到底了'),
						icon: 'none',
						duration: 2000,
					})
				}
			}
		},
		created() {
			this.getDatasList()
		},
		methods: {


			// 获取列表数据
			getDatasList() {
				if (!this.rrl_id) return

				let data = {
					page_no: this.pageobj.page_no, //	Integer	必填，非空	页码，默认1
					page_size: this.pageobj.page_size, //	Integer	必填，非空	每页显示，默认10
					rrl_id: this.rrl_id,
				}
				apiorderLists(data).then((res) => {
					console.log(res, 'lists')
					this.handleDatas(this.$zhTran(res))
				}).catch(err => {

				})
			},
			// 处理列表数据
			handleDatas(resobj) {
				if (!resobj) return;
				let {
					count,
					lists,
					extend,
				} = resobj
				let {
					page_size,
					initial
				} = this.pageobj
				for (let item of lists) {
					if (!initial) {
						this.pageobj.list.push(item)
					}
				}
				if (initial) { // 初次加载
					this.pageobj.page_total = Math.ceil(count / page_size)
					this.pageobj.list = lists
					this.pageobj.initial = false

				}
			},
			// 列表重置
			ResetRefresh() {
				this.pageobj.page_no = 1
				this.pageobj.page_size = 10
				this.pageobj.page_total = 0
				this.pageobj.list = []
				this.pageobj.initial = true
				this.getDatasList()
			},
			// 原地页面刷新 数据变动
			InsituRefresh() {
				this.pageobj.page_size = this.pageobj.page_size * this.pageobj.page_no
				this.pageobj.page_no = 1
				this.page_total = 0
				this.pageobj.initial = true
				this.getDatasList()
			},
		},
		data() {
			return {
				pageobj: {
					page_no: 1, // 当前第几页
					page_size: 10, // 一页多少数据
					page_total: 0,
					initial: true, // 是否为第一次加载数据
					list: [],
				},

			}
		},
	}
</script>

<style lang="scss" scoped>
	.info_tit {
		padding: 26rpx 0 22rpx 0;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(159, 159, 159, 1);
		text-align: left;
		vertical-align: top;
	}

	.order_item {
		width: 100%;
		padding: 0 34rpx 26rpx 34rpx;

		.order_top {
			position: relative;
			width: 100%;
			min-height: 136rpx;
			border-bottom: solid 2rpx rgba(240, 240, 240, 1);

			.img_box {
				margin-right: 16rpx;
				width: 80rpx;
				height: 80rpx;
				border-radius: 100%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.uinfo {
				.name {

					font-size: 28rpx;
					font-weight: 550;
					color: rgba(22, 22, 22, 1);
					text-align: left;
					vertical-align: top;
					margin-bottom: 8rpx;
				}

				.orderNum {

					font-size: 24rpx;
					font-weight: 400;
					color: rgba(159, 159, 159, 1);
					text-align: left;
					vertical-align: top;

					text {
						font-size: 26rpx;
						font-weight: 550;
						color: rgba(64, 115, 250, 1);
						text-align: left;
						vertical-align: top;

					}
				}
			}

			.state_area {
				position: absolute;
				top: 26rpx;
				right: 0;

				.state_box {
					width: 100rpx;
					height: 40rpx;
					border-radius: 6rpx;
					background: rgba(242, 246, 255, 1);

					font-size: 24rpx;
					font-weight: 400;
					color: rgba(64, 115, 250, 1);
					text-align: center;
					vertical-align: top;

				}

				.state_box.style2 {
					background: rgba(245, 36, 65, 0.08);
					color: rgba(245, 36, 65, 1);
				}
			}
		}

		.order_bottom {
			width: 100%;
			padding-top: 20rpx;

			.binfoline {

				font-size: 24rpx;
				font-weight: 400;
				color: rgba(159, 159, 159, 1);
				text-align: left;
				vertical-align: top;
				margin-bottom: 10rpx;
			}
		}
	}
</style>